﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //实例化地图视图对象
            var view = new ol.View({
                center: [12950000, 4860000],
                zoom: 7
            });

            var baseLayer = new ol.layer.Tile({
                title: "base",
                source: new ol.source.OSM()
            });

            /**
             * @link {https://www.runoob.com/cssref/css3-pr-filter.html}
            *1　  grayscale灰度
            *2　　sepia褐色（有种复古的旧照片感觉）
            *3　　saturate饱和度
            *4　　hue-rotate色相旋转
            *5　　invert反色
            *6　　opacity透明度
            *7　　brightness亮度
            *8　　contrast对比度
            *9　　blur模糊
            *10　　drop-shadow阴影
            */
            baseLayer.on('postcompose', function (event) {
                event.context.filter = "grayscale(10) sepia(120%) saturate(140%) hue-rotate(165deg) brightness(101%)";
            });


            //实例化地图对象
            var map = new ol.Map({
                target: 'map',
                layers: [
                    baseLayer
                ],
                loadTilesWhileAnimating: true,
                view: view
            });


        };

    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>
